<!DOCTYPE html>
<html>
<head>
<title>Static Force Analysis</title>
</head>
<body>

<canvas id="physicsCanvas" width="600" height="400"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        
        // Draw line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Drawing parameters
    const centerX = 300;
    const groundY = 320;
    const groundStart = 50;
    const groundEnd = 550;
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Draw Ground
    ctx.beginPath();
    ctx.moveTo(groundStart, groundY);
    ctx.lineTo(groundEnd, groundY);
    ctx.stroke();

    // Draw hatches for the ground
    for (let i = groundStart; i < groundEnd; i += 15) {
        ctx.beginPath();
        ctx.moveTo(i, groundY);
        ctx.lineTo(i - 10, groundY + 10);
        ctx.stroke();
    }

    // 2. Draw Blocks
    const h_c = 80;
    const w_c = 280;
    const y_c = groundY - h_c;
    const x_c = centerX - w_c / 2;

    const h_b = 60;
    const w_b = 180;
    const y_b = y_c - h_b;
    const x_b = centerX - w_b / 2;

    const h_a = 50;
    const w_a = 100;
    const y_a = y_b - h_a;
    const x_a = centerX - w_a / 2;
    
    ctx.strokeRect(x_a, y_a, w_a, h_a);
    ctx.strokeRect(x_b, y_b, w_b, h_b);
    ctx.strokeRect(x_c, y_c, w_c, h_c);

    // 3. Label Blocks
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('a', centerX, y_a + h_a / 2);
    ctx.fillText('b', centerX, y_b + h_b / 2);
    ctx.fillText('c', centerX, y_c + h_c / 2);

    // 4. Draw Forces
    const forceLength = 100;

    // Force Fb (pointing to b)
    const fb_y = y_b + h_b / 2;
    const fb_endX = x_b;
    const fb_startX = fb_endX - forceLength;
    drawArrow(ctx, fb_startX, fb_y, fb_endX, fb_y);

    // Force Fc (originating from c)
    const fc_y = y_c + h_c / 2;
    const fc_startX = x_c + w_c;
    const fc_endX = fc_startX + forceLength;
    drawArrow(ctx, fc_startX, fc_y, fc_endX, fc_y);

    // 5. Label Forces
    // Label Fb (at the tail of the arrow)
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('F', fb_startX, fb_y-2);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('b', fb_startX + 12, fb_y + 2);

    // Label Fc (at the head of the arrow)
    ctx.font = 'italic 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('F', fc_endX, fc_y -2);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('c', fc_endX + 12, fc_y + 2);

</script>

</body>
</html>